<template>
  <div class="app">
    <div class="file-list-div">
      <div>
        <h3>{{ title }}</h3>
      </div>
      <div class="file-item">
        <div class="rank-no">排名.</div>
        <div class="rank-text">用户名</div>
        <div class="rank-text">得分</div>
      </div>
      <div class="file-item" v-for="item in rankList" :key="item.rank">
        <div class="rank-no">{{ item.rank }}.</div>
        <div class="rank-text">{{ item.userName }}</div>
        <div class="rank-text">{{ item.score }}</div>
      </div>
      <div v-if="rankSelfDisplay">您在学员考试中的排名为: {{ rankSelf.rank }}</div>
    </div>
    <div class="return" @click="back"></div>
  </div>
</template>

<script>
import { BizExamController, BizExamPaperController } from '@/api';
export default {
  name: 'material',
  data() {
    return {
      personnelType: null,
      moduleType: 3,
      rankList: [],
      rankSelf: null,
      rankSelfDisplay: false,
      title: ''
    };
  },
  methods: {
    back() {
      this.$router.replace({
        name: 'course',
        query: { moduleType: this.moduleType, personnelType: this.personnelType }
      });
    },
    getExamTitle() {
      let params = {};
      params = {
        personnelType: this.personnelType,
        moduleType: this.moduleType
      };
      return new Promise((resolve, reject) => {
        BizExamPaperController.getPublishExam(this, params)
          .then(res => {
            console.log(res);
            this.title = res.data.paperName;
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    getRankList() {
      let params = {};
      params = {
        personnelType: this.personnelType,
        moduleType: this.moduleType
      };
      return new Promise((resolve, reject) => {
        BizExamController.rank(this, params)
          .then(res => {
            this.rankList = res.data;
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    getRankSelf() {
      let params = {};
      params = {
        personnelType: this.personnelType,
        moduleType: this.moduleType
      };
      return new Promise((resolve, reject) => {
        BizExamController.rankSelf(this, params)
          .then(res => {
            if (res.data && res.data.rank) {
              this.rankSelfDisplay = true;
              this.rankSelf = res.data;
            } else {
              this.rankSelf = { rank: '-' };
            }
          })
          .catch(e => {
            reject(e);
          });
      });
    }
  },
  mounted() {
    const personnelType = this.$route.query.personnelType;
    this.personnelType = personnelType;
    this.getRankList();
    this.getRankSelf();
    this.getExamTitle();
  }
};
</script>
<style scoped>
.app {
  background-image: url('~@/assets/img/bg.png'); /* 注意：在纯 CSS 中，这样的路径可能不被支持，需要确保路径正确 */
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让父容器充满整个视口高度 */
}

.app .file-list-div {
  width: 80%;
  height: 70%;
  background: rgba(63, 212, 255, 0.04);
  box-shadow: inset 0px 0px 50px 20px rgba(28, 131, 193, 0.15);
  border-radius: 2px;
  border: 1px solid rgba(63, 212, 255, 0.24);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #e3f3ff;
  line-height: 28px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  padding: 35px;
  overflow-y: auto;
}

.app .file-list-div .file-item {
  cursor: pointer;
  width: 100%;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
  box-shadow: inset 0px 0px 50px 20px rgba(28, 131, 193, 0.15);
  border-radius: 2px;
  border: 1px solid rgba(63, 212, 255, 0.24);
  margin: 10px 0px;
  padding: 0px 10px;
}

.return {
  width: 252px;
  height: 66px;
  background-image: url('~@/assets/img/return.png'); /* 同样，这样的路径在纯 CSS 中可能不被支持 */
  background-size: cover;
  position: absolute;
  bottom: 5%;
  cursor: pointer;
}
.rank-no {
  display: inline-block;
  width: 100px;
}
.rank-text {
  display: inline-block;
  width: 250px;
}
</style>
